<template>
  <ArtTableFullScreen>
    <div id="table-full-screen">
      <el-card shadow="never" class="art-table-card">
        <ArtTableHeader
          :columnList="columnOptions"
          v-model:columns="columnChecks"
          @refresh="handleRefresh"
        >
        </ArtTableHeader>
        <art-table
          :data="tableData"
          :loading="loading"
          :total="total"
          v-model:page-size="queryParams.size"
          v-model:current-page="queryParams.page"
          @current-change="getTableData"
          @size-change="getTableData"
        >
          <template #default>
            <el-table-column v-for="col in columns" :key="col.prop" v-bind="col" />
          </template>
        </art-table>
      </el-card>
    </div>
  </ArtTableFullScreen>
</template>

<script setup lang="ts">
  import { ComplaintService } from '@/api/common/complaint'
  import { useCheckedColumns } from '@/composables/useCheckedColumns'

  const loading = ref(false)
  const tableData = ref<any>([])
  const queryParams = reactive({
    page: 1,
    size: 15
  })
  const total = ref(0)
  // 列配置
  const columnOptions = [
    { label: 'ID', prop: 'id' },
    { label: '内容', prop: 'content' },
    { label: '投诉时间', prop: 'create_time' }
  ]
  // 动态列配置
  const { columnChecks, columns } = useCheckedColumns(() => [
    // { type: 'index', label: '序号', width: 80, align: 'center' }, // 序号列
    { prop: 'id', label: 'ID', align: 'center', width: 80 },
    { prop: 'content', label: '内容', align: 'center' },
    { prop: 'create_time', label: '投诉时间', align: 'center' }
  ])

  onMounted(() => {
    getTableData()
  })
  // 刷新
  const handleRefresh = () => {
    getTableData()
  }
  // 获取列表
  const getTableData = async () => {
    loading.value = true
    const res = await ComplaintService.getComplaintList(queryParams)
    total.value = res.data.total
    tableData.value = res.data.data
    loading.value = false
  }
</script>
